Ext.onReady(function(){
　
　　// create the Data Store
　　var store = new Ext.data.Store({
　　　　// load using script tags for cross domain, if the data in on the same domain as
　　　　// this page, an HttpProxy would be better
　　　　proxy: new Ext.data.WCFHttpProxy({
　　　　　　url: '/EmployeeService.svc/GetEmployeePaging'
　　　　}),
　　
　　　　// create reader that reads the Topic records
　　　　reader: new Ext.data.WCFJsonReader({
　　　　　　root: 'EmployeeList',
　　　　　　totalProperty: 'TotalCount',
　　　　　　id: 'EmployeeID',
　　　　　　fields: [
　　　　　　　　{name: 'EmployeeID', type: 'int'},
　　　　　　　　{name: 'CnName', type: 'string'},
　　　　　　　　{name: 'Sex', type: 'string'},
　　　　　　　　{name: 'Age', type: 'int'},
　　　　　　　　{name: 'Email', type: 'string'},
　　　　　　　　{name: 'OnWorkDate',type:'string'},
　　　　　　　　{name: 'DeptName', type: 'string'}
　　　　　　]
　　　　}),
　　
　　　　// turn on remote sorting
　　　　remoteSort: true
　　});
　　
　　store.setDefaultSort('EmployeeID', 'ASC');
　　
　　// 把true和false转化为男或者女，这个其实可以在服务器端进行转化，写在这里只是为了测试
　　function renderSex(value, p, record){
　　return record.data.Sex=="true"?"男":"女";
　　}
　　//这个函数演示了怎样把服务器端的DateTime类型转为Javascript的日期
　　function renderOnWorkDate(value, p, record){
　　　　var jsondate = record.data.OnWorkDate;
　　　 return eval("new " + jsondate.substr(1,jsondate.length-2)).toLocaleDateString();
　　}
　　
　　// the column model has information about grid columns
　　// dataIndex maps the column to the specific data field in
　　// the data store
　　var nm = new Ext.grid.RowNumberer();
　　var sm = new Ext.grid.CheckboxSelectionModel();　// add checkbox column
　　
　　var cm = new Ext.grid.ColumnModel([nm,sm,{
　　　　　 header: "员工ID",
　　　　　 dataIndex: 'EmployeeID',
　　　　　 width: 100
//　　　　　 renderer: renderTopic
　　　 },{
　　　　　 header: "姓名",
　　　　　 dataIndex: 'CnName',
　　　　　 width: 200
　　　　},{
　　　　　 header: "性别",
　　　　　 dataIndex: 'Sex',
　　　　　 width: 70,
　　　　　 renderer: renderSex
　　　　},{
　　　　　 header: "年龄",
　　　　　 dataIndex: 'Age',
　　　　　 width: 70
　　　　　
　　　　},{
　　　　 header: "Email",
　　　　　 dataIndex: 'Email',
　　　　　 width: 150
　　　　},{
　　　　　 header: "入职时间",
　　　　　 dataIndex: 'OnWorkDate',
　　　　　 width: 150,
　　　　　 renderer: renderOnWorkDate
　　　　},{
　　　　　 header: "部门",
　　　　　 dataIndex: 'DeptName',
　　　　　 width: 200
　　　　　
　　　　}]);
　　
　　// by default columns are sortable
　　cm.defaultSortable = true;
　　
　　var grid = new Ext.grid.GridPanel({
　　　　//el:'topic-grid',
　　　　renderTo: document.body,
　　　　width:800,
　　　　height:500,
　　　　title:'分页和排序列表',
　　　　store: store,
　　　　cm: cm,
　　　　trackMouseOver:false,
　　　　sm: sm,
　　　　loadMask: true,
　　　　viewConfig: {
　　　　　　forceFit:true,
　　　　　　enableRowBody:true,
　　　　　　showPreview:true,
　　　　　　getRowClass : function(record, rowIndex, p, store){
　　　　　　　
　　　　　　　　return 'x-grid3-row-collapsed';
　　　　　　}
　　　　},
　　　　 // inline toolbars
　　　　tbar:[{
　　　　　　text:'添加',
　　　　　　tooltip:'添加一条记录',
　　　　　　iconCls:'add',
　　　　　　handler:handleAdd
　　　　}, '-', {
　　　　　　text:'修改',
　　　　　　tooltip:'修改',
　　　　　　iconCls:'option',
　　　　　　handler:handleEdit
　　　　},'-',{
　　　　　　text:'删除',
　　　　　　tooltip:'删除记录',
　　　　　　iconCls:'remove',
　　　　　　handler:handleDelete
　　　　}],
　　　　bbar: new Ext.PagingToolbar({
　　　　　　pageSize: 25,
　　　　　　store: store,
　　　　　　displayInfo: true
　　　　})
　　});
　
　　// render it
　　grid.render();
　　
　　// trigger the data store load
　　var request={start:0,limit:25};
　　store.load({params:request});
　　
　　//获取部门列表
　　　var deptDs = new Ext.data.Store({
　　　　proxy: new Ext.data.WCFHttpProxy({
　　　　　　url:"%5C%22fckeditor/editor/%27/EmployeeService.svc/GetDeptList%27%5C%22">url:'/EmployeeService.svc/GetDeptList'
　　　　}),
　　　　reader: new Ext.data.WCFJsonReader({
　　　　　　　　　　root: 'DeptList',
　　　　　　　　　　id: 'DeptID'
　　　　　　　　　　}, [ 'DeptID', 'DeptName']
　　　　　　　　),
　　　　remoteSort: false
　　　});
　
　　
　　//员工信息表单
　　 var EmpForm = new Ext.FormPanel({
　　　　frame: true,
　　　　labelAlign: 'right',
　　　　labelWidth: 120,
　　　　width: 450,
　　　　height:250,
　　　　items: new Ext.form.FieldSet({
　　　　　　　　title: '员工资料',
　　　　　　　　autoHeight: true,
　　　　　　　　defaults: {width: 200},
　　　　　　　　defaultType: 'textfield',
　　　　items: [new Ext.form.Hidden({
　　　　　　　　name: 'EmployeeID'
　　　　　　}),{
　　　　　　　　fieldLabel: '姓名',
　　　　　　　　name: 'CnName',
　　　　　　　　allowBlank:false
　　　　　　},new Ext.form.ComboBox({
　　　　　　　　fieldLabel: '性别',
　　　　　　　　hiddenName:'Sex',
　　　　　　　　store: new Ext.data.SimpleStore({
　　　　　　　　　　fields: ['value', 'text'],
　　　　　　　　　　data : [[1,'男'],[0,'女']]
　　　　　　　　}),
　　　　　　　　valueField:'value',
　　　　　　　　displayField:'text',
　　　　　　　　typeAhead: true,
　　　　　　　　mode: 'local',
　　　　　　　　triggerAction: 'all',
　　　　　　　　selectOnFocus:true,
　　　　　　　　allowBlank:false
　　　　　　}),new Ext.form.NumberField({
　　　　　　　　fieldLabel: '年龄',
　　　　　　　　name: 'Age'
　　　　　　}), {
　　　　　　　　fieldLabel: 'Email',
　　　　　　　　name: 'Email',
　　　　　　　　vtype:'email'
　　　　　　}, new Ext.form.DateField({
　　　　　　　　　　　　　　fieldLabel: '入职时间',
　　　　　　　　　　　　　　name: 'OnWorkDate',
　　　　　　　　　　　　　　allowBlank:false,
　　　　　　　　　　　　　　format : "Y-m-d"
　　　　　　}), new Ext.form.ComboBox({
　　　　　　　　　　　　　　fieldLabel: '所属部门',
　　　　　　　　　　　　　　name: 'DepartmentName',
　　　　　　　　　　　　　　hiddenName: 'DepartmentID',
　　　　　　　　　　　　　　store: deptDs,
　　　　　　　　　　　　　　valueField: 'DeptID',
　　　　　　　　　　　　　　displayField: 'DeptName',
　　　　　　　　　　　　　　typeAhead: true,
　　　　　　　　　　　　　　mode: 'remote',
　　　　　　　　　　　　　　triggerAction: 'all',
　　　　　　　　　　　　　　emptyText: '请选择部门',
　　　　　　　　　　　　　　selectOnFocus: true,
　　　　　　　　　　　　　　allowBlank: false
　　　　　　　　　　　　})
　　　　　　]
　　　　 })
　　});
　
　　
　　 function handleAdd(){
　　　 var AddEmpWin = new Ext.Window({
　　　　　　　　title: '增加新员工',
　　　　　　　　layout:'fit',
　　　　　　　　width:500,
　　　　　　　　height:300,
　　　　　　　　plain: true,
　　　　　　　　items:EmpForm,
　　　　　　　　buttons: [{
　　　　　　　　　　text:'保存',
　　　　　　　　　　handler: AddRecord
　　　　　　　　},{
　　　　　　　　　　text: '取消',
　　　　　　　　　　handler: function(){
　　　　　　　　　　　　AddEmpWin.hide();
　　　　　　　　　　}
　　　　　　　　}]
　　 });
　　　　AddEmpWin.show(this);
　　}　
　　function handleEdit(){
　　 var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
　　　　　　if(selectedKeys.length != 1){
　　　　　　　　Ext.MessageBox.alert('提示','请选择一条记录！');
　　　　　　}　　
　　　　　　else {
　　　　　　var EditEmpWin = new Ext.Window({
　　　　　　　　title: '修改员工资料',
　　　　　　　　layout:'fit',
　　　　　　　　width:500,
　　　　　　　　height:300,
　　　　　　　　plain: true,
　　　　　　　　items:EmpForm,
　　　　　　　　buttons: [{
　　　　　　　　　　text:'保存',
　　　　　　　　　　handler: UpdateRecord
　　　　　　　　},{
　　　　　　　　　　text: '取消',
　　　　　　　　　　handler: function(){
　　　　　　　　　　　　EditEmpWin.hide();
　　　　　　　　　　}
　　　　　　　　}]
　　 });
　　　　EditEmpWin.show(this);
　　　　//Ext.MessageBox.alert("提示",selectedKeys);
　　　　　deptDs.load(); //取得科室列表
　　　　var request = {empID:selectedKeys[0]};
　　　　　　 Ext.MessageBox.show({
　　　　　　　　　　　　　 msg: '正在请求数据, 请稍侯',
　　　　　　　　　　　　　 progressText: '正在请求数据',
　　　　　　　　　　　　　 width:300,
　　　　　　　　　　　　　 wait:true,
　　　　　　　　　　　　　 waitConfig: {interval:200}
　　　　　　　　　　 });
　　　　　　Ext.Ajax.request({
　　　　　　　　　　url: '/EmployeeService.svc/GetEmployee', //url to server side script
　　　　　　　　　　method: 'POST',
　　　　　　　　　　params:Ext.util.JSON.encode(request),//the unique id(s)
　　　　　　　　　　callback: function (options, success, response) {
　　　　　　　　　　　　if (success) { //success will be true if the request succeeded
　　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　　var formvalue=ConvertResponseText(response.responseText,"OnWorkDate",true,true);
　　　　　　　　　　　　　　　EmpForm.form.setValues(formvalue);
　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　 Ext.MessageBox.hide();
　　　　　　　　　　　　　　 Ext.MessageBox.alert("失败，请重试",response.responseText);
　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　//the function to be called upon failure of the request (server script, 404, or 403 errors)
　　　　　　　　　　failure:function(response,options){
　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
　　　　　　　　　　},　
　　　　　　　　　　success:function(response,options){
　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　}　　　　　　　　　　　　　　　　　　
　　　　　})// end Ajax request
　　　　}
　　}　
　　function UpdateRecord(btn)
　　{
　　　　if (EmpForm.form.isValid()) {
　　　　　　　　btn.disabled=true;
　　　　　　　　Ext.MessageBox.show({
　　　　　　　　　　　 msg: '正在请求数据, 请稍侯',
　　　　　　　　　　　 progressText: '正在请求数据',
　　　　　　　　　　　 width:300,
　　　　　　　　　　　 wait:true,
　　　　　　　　　　　 waitConfig: {interval:200}
　　　　　　　　 });
　　　　　　　　 var formvalue = EmpForm.form.getValues();
　　　　　　　　 var request = {emp:ConvertFormValue(formvalue,'OnWorkDate')};
　　　　　　　　 //Ext.MessageBox.alert("提示",formvalues);
　　　　　　　　Ext.Ajax.request({
　　　　　　　　　　　　url: '/EmployeeService.svc/UpdateEmployee', //url to server side script
　　　　　　　　　　　　method: 'POST',
　　　　　　　　　　　　params:Ext.util.JSON.encode(request),//the unique id(s)
　　　　　　　　　　　　callback: function (options, success, response) {
　　　　　　　　　　　　　　if (success) { //success will be true if the request succeeded
　　　　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　　　　var alertcontent=ConvertResponseText(response.responseText,"",true,false);
　　　　　　　　　　　　　　　　　Ext.MessageBox.alert("成功",alertcontent);
　　　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　　　 Ext.MessageBox.hide();
　　　　　　　　　　　　　　　　 Ext.MessageBox.alert("失败，请重试",response.responseText);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　//the function to be called upon failure of the request (server script, 404, or 403 errors)
　　　　　　　　　　　　failure:function(response,options){
　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
　　　　　　　　　　　　},　
　　　　　　　　　　　　success:function(response,options){
　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　store.reload();
　　　　　　　　　　　　}　　　　　　　　　　　　　　　　　　
　　　　　　　})// end Ajax request
　　　　 }
　　}　　
　　
　　function AddRecord(btn)
　　{
　　　　if (EmpForm.form.isValid()) {
　　　　　btn.disabled=true;
　　　　　　　　　 Ext.MessageBox.show({
　　　　　　　　　　　 msg: '正在请求数据, 请稍侯',
　　　　　　　　　　　 progressText: '正在请求数据',
　　　　　　　　　　　 width:300,
　　　　　　　　　　　 wait:true,
　　　　　　　　　　　 waitConfig: {interval:200}
　　　　　　　　 });
　　　　　　　　 var formvalue = EmpForm.form.getValues();
　　　　　　　　 var request = {emp:ConvertFormValue(formvalue,'OnWorkDate')};
　　　　　　　　 //Ext.MessageBox.alert("提示",formvalues);
　　　　　　　　Ext.Ajax.request({
　　　　　　　　　　　　url: '/EmployeeService.svc/AddEmployee', //url to server side script
　　　　　　　　　　　　method: 'POST',
　　　　　　　　　　　　params:Ext.util.JSON.encode(request),//the unique id(s)
　　　　　　　　　　　　callback: function (options, success, response) {
　　　　　　　　　　　　　　if (success) { //success will be true if the request succeeded
　　　　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　　　　var alertcontent=ConvertResponseText(response.responseText,"",true,false);
　　　　　　　　　　　　　　　　　Ext.MessageBox.alert("成功",alertcontent);
　　　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　　　 Ext.MessageBox.hide();
　　　　　　　　　　　　　　　　 Ext.MessageBox.alert("失败，请重试",response.responseText);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　//the function to be called upon failure of the request (server script, 404, or 403 errors)
　　　　　　　　　　　　failure:function(response,options){
　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
　　　　　　　　　　　　},　
　　　　　　　　　　　　success:function(response,options){
　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　store.reload();
　　　　　　　　　　　　}　　　　　　　　　　　　　　　　　　
　　　　　　　})// end Ajax request
　　　　　　　　
　　　　}
　　}
　　
　　function handleDelete(){
　　　var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
　　　　　　if(selectedKeys.length > 0)
　　　　　　{
　　　　　　　　Ext.MessageBox.confirm('提示','您确实要删除选定的记录吗？', deleteRecord);
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　Ext.MessageBox.alert('提示','请至少选择一条记录！');
　　　　　　}//end
　　}　
　
　　function deleteRecord(btn){
　　　　 if(btn=='yes'){
　　　　　　　var selectedRows = grid.selModel.selections.items;//returns record objects for selected rows (all info for row)
　　　　　　　　var selectedKeys = grid.selModel.selections.keys;
　　　　　　　　//var deleteresult = AjaxRequest('/EmployeeService.svc/DelEmployee',selectedKeys,false,"")
　　　　　　　　Ext.MessageBox.show({
　　　　　　　　　　　 msg: '正在请求数据, 请稍侯',
　　　　　　　　　　　 progressText: '正在请求数据',
　　　　　　　　　　　 width:300,
　　　　　　　　　　　 wait:true,
　　　　　　　　　　　 waitConfig: {interval:200}
　　　　　　　　 });
　　　　　　　　Ext.Ajax.request({
　　　　　　　　　　　　url: '/EmployeeService.svc/DelEmployee', //url to server side script
　　　　　　　　　　　　method: 'POST',
　　　　　　　　　　　　params:Ext.util.JSON.encode(selectedKeys),//the unique id(s)
　　　　　　　　　　　　callback: function (options, success, response) {
　　　　　　　　　　　　　　if (success) { //success will be true if the request succeeded
　　　　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　　　　 var alertcontent=ConvertResponseText(response.responseText,"",false,false);
　　　　　　　　　　　　　　　　　Ext.MessageBox.alert("成功",alertcontent);
　　　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　　　 Ext.MessageBox.hide();
　　　　　　　　　　　　　　　　 Ext.MessageBox.alert("失败，请重试",response.responseText);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　//the function to be called upon failure of the request (server script, 404, or 403 errors)
　　　　　　　　　　　　failure:function(response,options){
　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
　　　　　　　　　　　　},　
　　　　　　　　　　　　success:function(response,options){
　　　　　　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　　　　　　store.reload();
　　　　　　　　　　　　}　　　　　　　　　　　　　　　　　　
　　　　　　　})// end Ajax request
　　　　 }//end if click 'yes' on button
　　} // end deleteRecord
　　
　
});